<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--  // 用 v-for 把一个数组对应为一组元素 -->
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">{{item.message}}</li>
        <li v-for="(item,index) in items">
            {{parentMessage}}-{{index}}-{{item.message}}
        </li>
        <!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： -->
        <li v-for="item of items">{{item.message}}</li> 
    </ul>
    <!-- 在 v-for 里使用对象 -->
    <ul id="example-2">
        <!-- 只有键值 -->
        <li v-for="value in object">
            {{ value }}
        </li>
        <!-- 有键值和键名的写法 -->
        <li v-for="(value,name) in object">
            {{name}}:{{ value }}
        </li>
        <!-- 用第三个参数作为索引： -->
        <li v-for="(value,name,index) in object"> 
            {{index}}.{{name}}:{{value}}
        </li>
    </ul>
    <ul id="example-3">
        <li v-for="item of items">{{item.message}}</li> 
        <li v-for="n in evenNumbers">{{ n }}</li>
        <ul v-for="set in sets">
            <li v-for="n in even(set)">{{ n }}</li>
        </ul>
        <!-- 在 v-for 里使用值范围 -->
        <span v-for="n in 10">{{ n }} </span>
    </ul>
    <!-- 在 <template> 上使用 v-for -->
    <ul id="example-4">
        <template  v-for="item in items">
            <li>{{item.message}}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    // 用 v-for 把一个数组对应为一组元素
    var example1 = new Vue({
        el:"#example-1",
        data:{
            parentMessage: "Parent",
            items:[
                {message:'Foo'},
                {message:'Bar'}
            ]
        }
    })
    // 在 v-for 里使用对象
    var example2 = new Vue({
        el:"#example-2",
        data:{
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })
    //数组检测更新
    var example3 = new Vue({
        el:"#example-3",
        data:{
            items:[
                {message:'Foo'},
                {message:'Bar'}
            ],
            numbers:[1,2,3,4,5],
            sets:[[1,2,3,4,5],[6,7,8,9,10]]
        },
        computed:{
            evenNumbers: function(){
                return this.numbers.filter(function (number) {
                        return number % 2 === 0
                })
            }
        },
        methods:{
            even:function(numbers){
                return numbers.filter(function(number){
                    return number%2===0
                })
            }
        }
    })
    example3.items.push({ message: 'Baz' })
    // 替换数组
    example3.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)})
    //在 <template> 上使用 v-for
            var example4 = new Vue({
        el:"#example-4",
        data:{
            items:[
                {message:'Foo'},
                {message:'Bar'}
            ]
        }
    })
</script>
</html>